<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
		/* :target          被锚链接指向的时候会触发该选择器
	::selection	     当被鼠标选中的时候的样式
	::first-line	 选中第一行
	::first-letter	 选中第一个字符 */


p {
	width: 50px;
	height: 100px;
	border: 1px solid red;
	word-break: break-all; /*  长度超出后换行 */
}
	p::selection {
		background-color: green;
	}
	
	p:target {
		color: red;
	}

	p::first-letter {
		font-size: 40px;	
		}


		p::first-line	 {
			color: yellow;

		}
	</style>
</head>
<body>  

	<a href="#ccc">跳转</a>
	 <p>111111111111111111111</p>
	 <p>2</p>
	 <p>3</p>
	 <p>4</p>
	 <p>5</p>
	 <p>6</p>
	 <p>7</p>
	 <p>8</p>
	 <p>9</p>
	 <p>10</p>
	 <p>11</p>
	 <p>12</p>
	 <p>13</p>
	 <p>14</p>
	 <p>15</p>
	 <p>16</p>
	 <p>17</p>
	 <p>18</p>
	 <p>19</p>
	 <p>20</p>
	 <p>21</p>
	 <p>22</p>
	 <p>23</p>
	 <p >24xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
	 <p>25</p>
	 <p>26</p>
	 <p>27</p>
	 <p>28</p>
	 <p>29</p>
	 <p>30</p>
	 <p id='ccc'>31</p>
	 <p>32</p>
	 <p>33</p>
	 <p>34</p>
	 <p>35</p>
	 <p>36</p>
	 <p>37</p>
	 <p>38</p>
	 <p>39</p>
	 <p>40</p>
	 <p>41</p>
	 <p>42</p>
	 <p>43</p>
	 <p>44</p>
	 <p>45</p>
	 <p>46</p>
	 <p>47</p>
	 <p>48</p>
	 <p>49</p>
	 <p>50</p>
</body>
</html>